<script>
  export default {
    functional: true,
    /**
     *
     * @param h
     * @param context {FunctionalContext}
     * @returns {JSX.Element}
     */
    render(h, context) {
      const {
        data: { key: rawKey },
        props,
        parent: { records }
      } = context

      const { hide, isVNode, filterable, allowSort, autoUpdate, scopedSlots, prop, ...rest } = props

      const key = `${rawKey}-${filterable}${autoUpdate ? `-${Math.random()}`.replace('0.', '') : ''}`

      const attrs = { props: { prop, ...rest } }

      if (filterable) {
        const filters = [...new Set(records.map(value => value[prop]).filter(value => value))].map(value => ({ text: value, value }))

        attrs.props.filterMethod = (value, row, column) => {
          const property = column.property
          return row[property] === value
        }
        attrs.props.filters = filters
      }

      return <ElTableColumn {...attrs} scopedSlots={scopedSlots} key={key} />
    }
  }
</script>
